<template>
    <div class="computed">
        <button class="minus" @click="food_num_change('minus')">-</button>
        <input type="text" class="num_area" v-model="number">
        <button class="plus" @click="food_num_change('plus')">+</button></td>
    </div>
</template>

<script>

export default {
    props:['num','index'],
    data () {
        return {
            number:1
        }
    },
    created:function(){
        this.number=parseInt(this.num);
    },
    watch: {
    },
    methods: {
        food_num_change(symbol){
          if(symbol == 'plus'){
            this.number++;
          }else if(symbol == 'minus'){
            this.number--;
            if( this.number<=1){ 
              this.number=1;
            }
          }
          this.resnum();
        },
        resnum(){
          var data={number:this.number,index:this.index}
          this.$emit('resnum',data)  
        }
    }
}
</script>

<style scoped>
.minus{
  float: left;
  margin-left: 15px;
}
.num_area{
  width: 38%;
  float: left;
  height: 28px;
  background-color:#fff;
  border: 1px solid #ccc;
  text-align: center;
  font:14px/28px '微软雅黑';
  color:#999;
}
.plus{
  float: left;
}
button{
  height: 30px;
  width: 20%;
  background-color: #fff;
  border: 1px solid #ccc;
  color:#999;
} 
</style>